<template>
  <div>
    <div class="login-banner">
      <img src="@/assets/login_bg@2x.png" class="img" />
      <div class="banner-text">
        <p class="welcome">欢迎使用，</p>
        <p class="platform">IT作业管理平台</p>
      </div>
    </div>
    <div class="login-text">
      <div class="text">登录</div>
      <img class="logo" src="@/assets/logo@2x.png" />
    </div>
    <!-- 输入框 -->
    <div class="login-input">
      <input
        type="text"
        class="input"
        v-model="form.user"
        placeholder="用户名"
      />
      <span
        class="font_family icon-shanchu right"
        v-show="userClear == true"
        @click="form.user = ''"
      ></span>
    </div>
    <div class="login-input">
      <input
        :type="showPassword == true ? 'text' : 'password'"
        class="input"
        v-model="form.password"
        placeholder="密码"
      />
      <span
        class="font_family icon-shanchu left"
        v-show="pswClear == true"
        @click="form.password = ''"
      ></span>
      <span
        class="font_family icon-kejian right"
        v-show="showPassword"
        @click="showpass"
      ></span>
      <span
        class="font_family icon-bukejian right"
        v-show="!showPassword"
        @click="showpass"
      ></span>
    </div>
    <div class="login-input code-input">
      <input
        type="text"
        class="input"
        v-model="form.code"
        placeholder="验证码"
      />
      <button :disabled="buttonDisable" @click="getCode">
        {{ buttonTitle }}
      </button>
    </div>
    <!-- 按钮 -->
    <div
      class="login-btn"
      :class="loginActive ? 'active' : ''"
      @click="handleLogin"
    >
      登录
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { login, getLoginCode, loginByUsername } from "@/api/common";
import { setToken } from "@/utils/auth";
import { newEncrypt } from "@/utils/cryptoDes";

export default {
  data() {
    return {
      showPassword: false,
      form: {
        user: "",
        password: "",
      },
      count: 60,
      buttonTitle: "获取验证码",
      buttonDisable: false, //倒计时进行中
      codeSample: "", // 存储验证码
    };
  },
  computed: {
    userClear() {
      if (this.form.user != "") {
        return true;
      } else {
        return false;
      }
    },

    pswClear() {
      if (this.form.password != "") {
        return true;
      } else {
        return false;
      }
    },
    loginActive() {
      if (this.userClear && this.pswClear && this.form.code) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.verify();
  },
  methods: {
    verify() {
      let param = {
        appKey: "",
        code: [1, 3, 5],
        comFlag: "qjf_workingPlatform",
        callback: "callbackSuccess",
      };
      const u = navigator.userAgent;
      console.log(u);
      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; // android终端
      if (isAndroid) {
        window.SysClientJs.getUserInfoCustomize(JSON.stringify(param));
      } else {
        window.webkitURL.messageHandlers.getUserInfoCustomize.postMessage(
          JSON.stringify(param)
        );
      }
      function callbackSuccess(data) {
        console.log(data);
        if (data && data.employeeNumber) {
          loginByUsername({
            username: data.employeeNumber,
          }).then((res) => {
            setToken(res.data.token);
            this.$router.push("/");
          });
        } else {
          return
        }
      }
      window.callbackSuccess = callbackSuccess;
    },
    showpass() {
      this.showPassword = !this.showPassword;
    },
    // 获取验证码
    getCode() {
      let that = this;

      getLoginCode({
        username: that.form.user,
      }).then((res) => {
        console.log(res);
        console.log(res.data.verifycode);
        if (res.code == "200") {
          that.getCodeSuccess();
          this.codeSample = res.data.verifycode;
        }
      });
    },
    //验证码倒计时
    getCodeSuccess() {
      let that = this;
      let count = this.count;
      let intervalId = setInterval(function () {
        count -= 1;
        that.buttonTitle = count + "s后重发";
        that.buttonDisable = true;
        console.log(count);
        if (count == 0) {
          clearInterval(intervalId); //倒计时结束，停止interval
          that.buttonTitle = "获取验证码";
          that.buttonDisable = false;
        }
      }, 1000); //参数一是函数  参数二是间隔毫秒数
    },
    handleLogin() {
      // 判断状态
      if (this.loginActive == false) {
        return false;
      }
      if (this.form.user == "") {
        Toast("请填写用户名");
        return false;
      }
      if (this.form.password == "") {
        Toast("请填写密码");
        return false;
      }
      if (this.form.code != this.codeSample) {
        Toast("请输入正确验证码");
        return false;
      }

      login({
        username: this.form.user,
        password: newEncrypt(this.form.password),
      }).then((res) => {
        // console.log(res.data.token)
        setToken(res.data.token);
        this.$router.push("/");
      });
    },
  },
};
</script>
<style scoped lang="less">
// banner
.login-banner {
  position: relative;
  width: 100vw;
  .img {
    width: 100%;
    display: block;
  }
  .banner-text {
    position: absolute;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    color: #fff;
    .welcome {
      font-size: 16px;
      margin: 0;
    }
    .platform {
      font-size: 21px;
      font-weight: bold;
      margin: 6px 0 0;
    }
  }
}
// login-text
.login-text {
  display: flex;
  margin: 21px 28px;
  .text {
    flex: 1;
    color: #313541;
    font-size: 21px;
    font-weight: bold;
    line-height: 52px;
  }
  .logo {
    width: 52px;
    height: 52px;
    display: block;
  }
}
// login-input
.login-input {
  position: relative;
  margin: 10px 28px 0;
  .input {
    border-bottom: 2px solid #f2f2f2;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    height: 24px;
    font-size: 15px;
    padding: 8px 0;
    line-height: 40px;
    width: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    &:focus {
      outline: none;
      border-bottom: 2px solid #009966;
    }
  }
  .icon-shanchu,
  .icon-kejian,
  .icon-bukejian {
    position: absolute;
    color: #8f92a1;
    font-size: 14px;
    top: 4px;
    padding: 10px;
    &.left {
      right: 35px;
    }
    &.right {
      right: 0;
    }
  }
  &.code-input {
    position: relative;
    button {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: #009966;
      width: 92px;
      height: 32px;
      color: #fff;
      font-size: 14px;
      border: none;
      outline: none;
      border-radius: 5px;
      box-sizing: border-box;
      border: 1px solid #009966;
      &:disabled {
        background: #fff;
        color: #009966;
      }
    }
  }
}
// login-btn
.login-btn {
  display: block;
  margin: 50px 28px 0;
  height: 49px;
  font-size: 16px;
  line-height: 49px;
  color: #fff;
  text-align: center;
  background: #009966;
  opacity: 0.6;
  border-radius: 9px;
  &.active {
    opacity: 1;
  }
}
</style>